<template>
	<view class="dic">
		<picker class="pick-wrap"
            :range="dics"
            :value="index"
            :range-key="'name'"
            @change="bindChange"
            :disabled="selectEnable"
        >
			<view class="show-vlaue" 
                :class="{ 'show-vlaue-p': !docShowName }"
            >
                {{ docShowName ? docShowName : ('请选择' + dicName) }}
            </view>
		</picker>
	</view>
</template>

<script>
import Vue from 'vue';

export default {
	name: 'ray-dictionary-select',
	props: {
        
        /**
         * 数据字典默认值
         */
        dicDefault: {
        	type: String,
        	default() {
        		return '';
        	}
        },
        
        /**
         * 数据字典名称
         */
        dicName: {
        	type: String,
        	default() {
        		return '数据字典';
        	}
        },
        
        /**
         * 数据字典标签
         */
		dicLabel: {
			type: String,
			default() {
				return '';
			}
		},
        /**
         * 回调函数方法名，默认为dicSelected
         */
		dicSelected: {
			type: String,
			default() {
				return 'dicSelected';
			}
		},
        /**
         * 是否禁用
         */
        selectEnable: {
            type: Boolean,
            default: false
        },
        
        /**
         * 数据字典点击提示
         */
        dicTips: {
        	type: String,
        	default() {
        		return '';
        	}
        },
	},
	components: {},
	data() {
		return {
			dics: [], // 数组字典列表
			index: 0, //选中的索引
			dicItem: {}, // 选中的数据字典
            docShowName: "", // 选中的数据字典名
		};
	},
	onLoad() {
    },
	created() {
		if (!this.dicLabel && !this.dicTips) {
			uni.showToast({
				title: '请设置dicLabel数据字典标签',
				icon: 'none'
			});
		}
        
        this.dics = this.$store.state.dictionary[this.dicLabel];
        if (this.dicDefault) {
            for (var i = 0; i < this.dics.length; i++) {
                let doc = this.dics[i];
                if (this.dicDefault == doc.value) {
                    this.dicItem = doc;
                    this.docShowName = doc.name;
                    this.index = i;
                    break;
                }
            }
        }
        
        if (!this.docShowName && this.selectEnable) {
            this.docShowName = "无";
        }
        console.log(this.docShowName);
    },
    mounted() {
    },
	onShow() {
    },
	methods: {
		/**
		 * @description:value 改变时触发 change 事件
		 * @author ray
		 */
		bindChange(e) {
            this.index = e.target.value;
            this.dicItem = this.dics[e.target.value];
            this.docShowName = this.dicItem.name;
			this.$emit(this.dicSelected, this.dicItem);
		},
        
        /**
         * @description:某一列的值改变时触发 columnchange 事件
         * @author yaoyanhui
         */
        bindColumnchange(e) {
        	console.log(e.detail)
        	if (e.detail.column == 0) {
                
        	}
        },
	}
};
</script>
<style lang="scss" scoped>
.dic {
    .pick-wrap {
    }
	.show-vlaue {
		color: #666666;
	}

	.show-vlaue-p {
		color: #999999;
	}
}
</style>
